<template>
	<view>
		
		<view v-if="!user" class="flex align-center">
			<view class="flex align-center justify-center person-left">
				<image src="/static/demo/avatar.jpg" mode="aspectFill" class="person-image rounded-circle"></image>
			</view>
			<view class="flex flex-column">
				<text class="font-md mb-1">未登录</text>
				<text class="font text-muted">登录体验更多功能</text>
			</view>
			<view class="ml-auto mr-3">
				<view class="border border-main rounded flex align-center justify-center p-2" hover-class="bg-light" @click="openLogin">
					<text class="text-main font">立即点击登录</text>
				</view>
			</view>
		</view>
		
		<view v-else class="flex align-center">
			<view class="flex align-center justify-center person-left">
				<image :src="user.avatar || defalutAvatar" mode="aspectFill" class="person-image rounded-circle"></image>
			</view>
			<view class="flex flex-column">
				<text class="font-md mb-1">{{user.username}}</text>
				<!-- <text class="font text-muted">描述</text> -->
			</view>
			<view class="ml-auto mr-3">
				<view class="border border-main rounded flex align-center justify-center p-2" hover-class="bg-light">
					<text class="text-main font">编辑资料</text>
				</view>
			</view>
		</view>
		<view class="f-divider"></view>
		<list-item title="我的金币" icon="icon-bizhongguanli" :showRight="false" @click="openCoin">
			<text class="text-muted font">{{user ? user.coin : 0}}金币 立即充值</text>
		</list-item>
		<list-item title="我的直播" icon="icon-zhibo">
			<text class="text-muted font">0</text>
		</list-item>
		<list-item title="我的关注" icon="icon-guanzhu">
			<text class="text-muted font">0</text>
		</list-item>
		<list-item title="历史记录" icon="icon-shouye"></list-item>
	</view>
</template>

<script>
	import listItem from '@/components/common/list-item.vue';
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				defalutAvatar: "https://z3.ax1x.com/2021/10/18/5aC09s.jpg"
			}
		},
		components: {
			listItem
		},
		computed: {
			...mapState({
				user: state => state.user
			})
		},
		onShow() {
			this.$store.dispatch('getUserInfo')
		},
		onNavigationBarButtonTap() {
			this.authJump({
				url: '../user/set'
			})
		},
		methods: {
			openLogin()  {
				uni.navigateTo({
					url: '../user/login'
				});
			},
			openCoin() {
				this.authJump({
					url: '/pages/coin/coin'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.person-left {
		width: 180rpx;
		height: 180rpx;
		
		.person-image {
			width: 105rpx;
			height: 105rpx;
		}
	}
</style>
